<template>
  <view class="clan-events">
    <view class="events-header">
      <view class="header-left">
        <view class="title-line"></view>
        <text class="events-title">近期活动</text>
      </view>
      <view class="events-more" @click="$emit('view-more')">
        <text class="more-text">查看更多</text>
        <text class="more-icon">›</text>
      </view>
    </view>

    <view class="events-list">
      <view
        v-for="(event, index) in eventList"
        :key="index"
        class="event-item"
        @click="$emit('view-event', event)"
      >
        <view class="event-image-wrapper">
          <image
            class="event-image"
            :src="event.image || '/static/images/event-default.jpg'"
            mode="aspectFill"
          ></image>
          <view v-if="event.tag" class="event-tag">{{ event.tag }}</view>
        </view>

        <view class="event-content">
          <view class="event-main">
            <text class="event-title">{{ event.title }}</text>
            <view class="event-meta">
              <view class="meta-item">
                <text class="meta-icon">📅</text>
                <text class="meta-text">{{ event.time }}</text>
              </view>
              <view class="meta-item">
                <text class="meta-icon">📍</text>
                <text class="meta-text">{{ event.location }}</text>
              </view>
            </view>
          </view>

          <view class="event-footer">
            <view class="event-status">
              <text class="status-badge" :class="getStatusClass(event.status)">
                {{ getStatusText(event.status) }}
              </text>
            </view>
            <view class="event-stats">
              <text class="stat-text">{{ event.joinCount || 32 }}人参与</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="!eventList || eventList.length === 0" class="empty-state">
      <image class="empty-image" src="/static/images/empty-event.png" mode="aspectFit"></image>
      <text class="empty-text">暂无近期活动</text>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Event {
  image: string;
  title: string;
  time: string;
  location: string;
  status?: "upcoming" | "ongoing" | "ended";
  tag?: string;
  joinCount?: number;
  [key: string]: any;
}

interface Props {
  eventList: Event[];
}

defineProps<Props>();
const emit = defineEmits<{
  "view-more": [];
  "view-event": [event: Event];
}>();

const getStatusText = (status: Event["status"]) => {
  const statusMap = {
    upcoming: "即将开始",
    ongoing: "进行中",
    ended: "已结束",
  };
  return statusMap[status || "ongoing"];
};

const getStatusClass = (status: Event["status"]) => {
  const classMap = {
    upcoming: "status-upcoming",
    ongoing: "status-ongoing",
    ended: "status-ended",
  };
  return classMap[status || "ongoing"];
};
</script>

<style scoped>
.clan-events {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 40rpx 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
}

.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.events-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1a1a1a;
}

.title-line {
  width: 6rpx;
  height: 28rpx;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  border-radius: 3rpx;
}

.events-more {
  display: flex;
  align-items: center;
  gap: 8rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  background-color: rgba(255, 107, 53, 0.1);
  transition: all 0.3s ease;
}

.events-more:active {
  transform: scale(0.95);
}

.more-text {
  font-size: 26rpx;
  color: #ff6b35;
  font-weight: 500;
}

.more-icon {
  font-size: 28rpx;
  color: #ff6b35;
  font-weight: bold;
}

.events-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.event-item {
  display: flex;
  background-color: #fafbfc;
  border-radius: 20rpx;
  padding: 24rpx;
  gap: 20rpx;
  transition: all 0.3s ease;
  border: 1rpx solid transparent;
}

.event-item:active {
  transform: translateY(-2rpx);
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
  border-color: #ff6b3520;
}
.event-image-wrapper {
  position: relative;
  flex-shrink: 0;
}

.event-image {
  width: 140rpx;
  height: 140rpx;
  border-radius: 16rpx;
  object-fit: cover;
}

.event-tag {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: #fff;
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 12rpx;
  font-weight: 600;
}

.event-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.event-main {
  margin-bottom: 16rpx;
}

.event-title {
  font-size: 30rpx;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 1.4;
  margin-bottom: 12rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-meta {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.meta-icon {
  font-size: 24rpx;
  color: #8a8a8a;
}

.meta-text {
  font-size: 26rpx;
  color: #666;
  font-weight: 400;
}

.event-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-badge {
  font-size: 22rpx;
  padding: 6rpx 16rpx;
  border-radius: 20rpx;
  font-weight: 600;
}

.status-ongoing {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  color: #fff;
}

.status-upcoming {
  background: linear-gradient(135deg, #1890ff, #40a9ff);
  color: #fff;
}

.status-ended {
  background: linear-gradient(135deg, #d9d9d9, #bfbfbf);
  color: #666;
}

.event-stats {
  display: flex;
  align-items: center;
}

.stat-text {
  font-size: 24rpx;
  color: #8a8a8a;
  font-weight: 500;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80rpx 40rpx;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 24rpx;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  font-weight: 400;
}

@media (prefers-color-scheme: dark) {
  .clan-events {
    background-color: #1a1a1a;
  }

  .events-title {
    color: #fff;
  }

  .event-item {
    background-color: #2a2a2a;
  }

  .event-title {
    color: #fff;
  }

  .meta-text {
    color: #b3b3b3;
  }
}
</style>
